<template>
  <el-card style="margin-top: -1em">
    <el-row class="margin">
      <el-col style="margin-left:10%" :span="8" v-for="nurse in nurseData">
        <el-card class="box-card" >
        <el-col>
          <el-image
            style="width: 135px; height: 160px"
            :src="nurse.profile"
            class="picture"
          ></el-image>
        </el-col>
        <el-col class="word">
          <div class="text" style="word-spacing: 10px">
            {{ nurse.name }}{{ "\xa0\xa0\xa0" }}{{ nurse.age }}岁<br />
          </div>
          <div class="text1">
            <br /><br />
            编号：{{ nurse.nno }} <br /><br />
            值班：{{ nurse.startTime.substring(0, 5) }}-{{
              nurse.endTime.substring(0, 5)
            }}
          </div>
        </el-col>
      </el-card>
      </el-col>
      
    </el-row>
  </el-card>
</template>

<script>
import { ref } from "vue";
import { duty } from "../api/duty";
import { ElMessage } from "element-plus"; //导入函数
export default {
  name: "Duty",
  setup() {
    const nurseData = ref([]);
    const getData = () => {
      //获取护士列表
      duty()
        .then((res) => {
          if (res.code > 0) {
            ElMessage.error("请求失败，请稍后重试！");
          } else {
            for (let i = 0; i < res.data.length; i++) {
              {
                let t = res.data[i];
                nurseData.value.push(t);
              }
            }
          }
        })
        .catch(() => {
          ElMessage.error("服务器未启动或其它错误！");
        });
    };
    //获取护士数据
    getData();
    return {
      nurseData,
    };
  },
};
</script>

<style scoped>
.margin {
  margin-bottom: 20px;
  margin-top: 2px;
  margin-left: -8px;
}

.box-card {
  margin-left: 10px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  padding-left: 0px;
  padding-right: 0px;
}

.word {
  margin-top: 10px;
  margin-left: 12px;
}

.text {
  font-size: 17px;
}

.text1 {
  font-size: 14px;
  color: cornflowerblue;
}

.picture {
  border: 1px rgb(45, 123, 220) ridge;
  margin-left: -10px;
  margin-top: -10px;
}
</style>